/*
 *  Questions.js
 *  created by qinghong
 *  2016-7-11
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Navigator,
    WebView,
    ScrollView,
    Image
} from 'react-native';

import Moment from 'moment';
import constant from './constant';
import ZanView from '../../com/ZanView';

export default class Question extends Component {

    render() {


        //let dateStr = Moment().format('MMMM DD, YYYY');
        //let queTitle = this.state.questionData.strQuestionTitle;
        //let ansTitle = this.state.questionData.strAnswerTitle;
        //
        //let queContent = this.state.questionData.strQuestionContent;
        //
        //let ansContentHtml = this.state.questionData.strAnswerContent;
        //let jsCode = `
        //        document.title = document.height;
        //    `;
        //
        //let editor = this.state.questionData.sEditor;
        //let zanNum = this.state.questionData.strPraiseNumber;



        let dateStr = Moment().format('MMMM DD, YYYY');
        let queTitle = "你是不是傻";
        let ansTitle = "被你猜对了";
        let queContent = "问题的内容,具体内容,你是不是真的傻";
        let ansContentHtml = "答案的内容,哈哈哈哈哈哈哈哈哈.答案的内容,哈哈哈哈哈哈哈哈哈答案的内容,哈哈哈哈哈哈哈哈哈答案的内容,哈哈哈哈哈哈哈哈哈答案的内容,哈哈哈哈哈哈哈哈哈";

        let editor = "编辑:青虹";
        let zanNum = 1222;

        return (
            <View style={styles.question}>
                <ScrollView style={styles.scrollView}>
                    <Text style={{marginLeft: 10, marginTop: 5, fontSize: 12}}>{dateStr}</Text>
                    <View style={styles.questionView}>
                        <Image source={require('../../images/img_que.png')}
                               style={{marginLeft: 20, marginRight: 15}}/>
                        <Text style={{fontSize: 15, marginRight: 15, flex: 1}}>
                            {queTitle}
                        </Text>
                    </View>
                    <Text style={{fontSize: 16, marginHorizontal: 10, marginTop: 15, marginBottom: 10, lineHeight: 24}}>
                        {queContent}
                    </Text>
                    <View style={{marginLeft: 10, marginRight: 10, marginVertical: 15,
                                      backgroundColor: 'rgb(210,210,210)', height: 0.5}}/>
                    <View style={[styles.questionView, {marginTop: 0}]}>
                        <Image source={require('../../images/img_ans.png')}
                               style={{marginLeft: 20, marginRight: 15}}/>
                        <Text style={{fontSize: 15, marginRight: 15, flex: 1}}>
                            {ansTitle}
                        </Text>
                    </View>
                    <WebView style={[styles.webView, {height: 100}]}
                             source={{html: ansContentHtml}}
                             scrollEnabled={false}
                    />
                    <Text style={{marginLeft: 10, marginTop: 5, fontSize: 10}}>{editor}</Text>
                    <View style={{height: 50, marginTop: 20, marginBottom: 10,
                         justifyContent: 'center', alignItems: 'flex-end'}}>
                        <ZanView zanNum={zanNum} style={styles.zanView}/>
                    </View>
                </ScrollView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    question: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        paddingTop: 64,
        paddingBottom: 49
    },
    scrollView: {
        width: constant.window.screenWidth,
        height: constant.window.screenHeight - 64 - 49
    },
    questionView: {
        flexDirection: 'row',
        marginTop: 15,
        alignItems: 'center'
    },
    webView: {
        width: constant.window.screenWidth - 10,
        marginTop: 10,
        marginHorizontal: 5
    },
    zanView: {
        height: 36,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        borderColor: 'gray',
        borderRadius: 18,
        borderWidth: 0.5,
        right: -18
    }
});

